<template>
  <div>
    <h2>Hello</h2>
    <p>x: {{ x }}</p>
    <p>y: {{ y }}</p>

    <div v-if="error">请求出错</div>
    <div v-else-if="data">
      {{ data }}
    </div>
    <div v-else>请求中</div>
  </div>
</template>

<script>
// 引入 useMouse 这个 hook
import useMouse from '../hooks/useMouse'

import useFetch from '../hooks/useFetch'

export default {
  setup() {
    const { x, y } = useMouse()

    // const mouse = useMouse()
    // mouse 是个普通对象，要获取 x 的话，需要 mouse.x.value
    // 如果直接通过 mouse.x 直接获取到 x 的具体值 这时可以将 useMouse() 用 reactive 包装一下
    // const mouse = reactive(useMouse())
    //      mouse Proxy{x: Ref, y: Ref}

    const { data, error } = useFetch('http://localhost:3000/carts')
    return {
      x,
      y,
      data,
      error,
    }
  },
}
</script>
